<template>
  <div>
     <div class="form">
     <p >
        <p style="float:left;" v-for='value,index in machine_type' > 
            <van-checkbox-group v-model="check_list" ref="checkboxGroup" @change='checked'>
                  <van-checkbox :name='value'> {{value}}</van-checkbox>
             </van-checkbox-group>
        </p>
        &emsp;

     </p>
     <van-field name="checkbox" label="设置定时发送">
         <template #input>
                <van-checkbox v-model="checktime" shape="square" @change="set_timing"/>
        </template>
     </van-field>
    <van-field name="checkbox" label="指定地区">
         <template #input>
                <van-checkbox v-model="checkplace" shape="square" @change="set_place_func" />
        </template>
     </van-field>
    <div class="form-group">
        <label for="exampleFormControlSelect1">推送优先度</label>
        <select  v-model='priority'>
            <option v-for='i in prioritys'>{{i}}</option>
       </select>
    </div>
    <div v-show='show_time'>
        <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="选择完整时间"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm='add_timeing'
        />
    </div>
    <div v-show='show_set_palce'>
            <van-picker
            title="选择地区"
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            />
    </div>
    <p v-show='timestr'>定时发送时间：{{timestr}}</p>
    <p v-show='place'>指定发送地址：{{place}}</p>
    <textarea v-model="msg" rows="3" placeholder="在此输入文本">
      </textarea>
    <button type="button" @click="send_btn" class="btn btn-primary">发送</button>
    </div>
  </div>
</template>

<script>
export default {
    data(){
      return{
      // 机器类型:
       machine_type:['PC','Android','iPhone'],
       check_list:[],
       // 优先度列表
       prioritys:['1','2','3'],
       //优先度
       priority:1,
       msg:'',
      minDate: new Date(),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      timestr:'',
       show_time:0,
       is_set_timing:0,
       checktime:false,

        checkplace:false,
       // 设置地区开关
       set_place:false ,
       // 展示设置地区
       show_set_palce:0,
       place:'',
       columns: [],
       }
    },
    sockets:{
        connect: function(){
            console.log('socket 连接成功')
        },
        message: function(val){
            console.log('发送:'+val);
        },
    },
    created(){
        this.get_place()
    },
    methods:{
        // 地区确认函数
        onConfirm(value, index) {
            this.place = value
            this.open_place_set()
            },
        onCancel() {  //取消函数
            this.set_place_func()
        },
       set_place_func(){
            if(this.set_place==0){
                this.set_place=1
                this.open_place_set()
            }else{
                this.show_set_palce=0
                this.set_place = 0
                this.place=''
            }
       },
        open_place_set(){
            if(this.show_set_palce==0){
                this.show_set_palce = 1
           }else{
                this.show_set_palce=0
            }
        },
        get_place(){
           
          this.axios.get('http://localhost:5000/get_places/').then(res=>{
                // console.log(res.data.data)
                for(let i=0;i<res.data.data.length;i++){
                    this.columns.push(res.data.data[i].name)
                }
            })

        },
       // 设置定时时间
        set_timing(){
            // 如果选择设定时间
            if(this.is_set_timing==0){
                this.is_set_timing=1
                this.open_time_set()
            }else{
                this.show_time=0
                this.is_set_timing = 0
                this.timestr=''
            }
        },
        // 是否展示时间设置
        open_time_set(){
            if(this.show_time==0){
                this.show_time=1
            }else{
                this.show_time=0
            }
        },
        checked(){
           
        },
        add_timeing(a){
            console.log(a.getTime())
            console.log(a.toLocaleDateString())
            console.log(a.toLocaleTimeString())
           this.timestr=this.currentDate.getFullYear()+'-'+ parseInt(this.currentDate.getMonth()+1) +'-'+this.currentDate.getDate()+' '+this.currentDate.getHours()+':'+this.currentDate.getMinutes()+':'+this.currentDate.getSeconds()
           this.open_time_set()

        },
        send_btn(){
            console.log(this.check_list,this.priority,this.msg)
            this.$socket.emit('message_push',encodeURI(JSON.stringify({title:this.msg,priority:this.priority,check_list:this.check_list,timing:this.timestr,is_set_timing:this.is_set_timing,place:this.place})));
            window.location.reload()
        
        },    
    }
}
</script>

<style>
.form{
    margin:0px auto; 
    margin-top: 130px;
    width: 502px;
    border: 1px black solid;
}
.send_btn{
    position: relative;
    right: -212px;
}

.centerstr{
  text-align: center;

  margin-left: 240px;
}
select{
   width:50px;
}
</style>
